<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%><!-- struts的tag(標籤) 固定用法 -->
<%@ taglib uri="/pagination-tags" prefix="p"%><!-- 分頁的tag(標籤) 固定用法 -->

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test</title>
		<link type="text/css" rel="stylesheet" href="<s:url value="./base/css/pagination.css" />" />
		<script type="text/javascript" src="<s:url value="./base/script/jquery.js" />"></script>
		<script type="text/javascript" src="<s:url value="./base/script/arrayList.js" />"></script>
		<script type="text/javascript" src="<s:url value="./base/script/taglib/pagination.js" />"></script>
	
	<script type="text/javascript" src="<s:url value="./base/script/jquery.history.js" />"></script>
	
		<script>
			$(function() {
				//qryByCache('pagination!preQryByCache.action');
				
			});
			
			$(window).bind('hashchange', function (e) {
                //由hash取出step參數，決定要顯示哪一個div
				var url = String(location);
				var paginationPage_qryByCacheDiv  = "paginationPage_qryByCacheDiv"
				var paginationSize_qryByCacheDiv = "paginationSize_qryByCacheDiv"
				if (url.indexOf(paginationPage_qryByCacheDiv) > 0) { 
					var currentUrl = parseURL(url);
					var newPage = 1;
					var newPageSize = 10;
					for (var x in currentUrl.hash) {
						if (paginationPage_qryByCacheDiv == x) {
							newPage = currentUrl.hash[x] ;
							break;
						}
					}
					
					for (var x in currentUrl.hash) {
						if (paginationSize_qryByCacheDiv == x) {
							newPageSize = currentUrl.hash[x] ;
							break;
						}
					}
					
					$.ajax({
						type: "POST",
						datatype:"html",
						url: "pagination!qryByCache.action",
						data: {pageSize:newPageSize, nextPage:newPage},
						success: function(result){
							    $("#qryByCacheDiv").html(result);
							    //觸發預載
							  	preQueryByAJAX("pagination!preQryByCache.action");
						},
						error: function(data, status, e){
							    alert("Ajax失敗 = " + e.message);
							   }
						});
				} else {
					 $("#qryByCacheDiv").html("");
				}

            });
			
			$(window).bind('hashchange', function (e) {
				var url = String(location);
				var paginationPage_qryByDBDiv  = "paginationPage_qryByDBDiv"
				var paginationSize_qryByDBDiv = "paginationSize_qryByDBDiv"
				if (url.indexOf(paginationPage_qryByDBDiv) > 0){ 
					var currentUrl = parseURL(url);
					var newPage = 1;
					var newPageSize = 10;
					for (var x in currentUrl.hash) {
						if (paginationPage_qryByDBDiv == x) {
							newPage = currentUrl.hash[x] ;
							break;
						}
					}
					for (var x in currentUrl.hash) {
						if (paginationSize_qryByDBDiv == x) {
							newPageSize = currentUrl.hash[x] ;
							break;
						}
					}
					$.ajax({
						type: "POST",
						datatype:"html",
						url: "pagination!qryByDB.action",
						data: {pageSize:newPageSize, nextPage:newPage},
						success: function(result){
							    $("#qryByDBDiv").html(result);
						},
						error: function(data, status, e){
							    alert("Ajax失敗 = " + e.message);
							   }
						});
				}
			});
			
			//AJAX的div顯示
			function qryByCache(preQryUrl) { 
		    	//this.goToNextPageByAJAX('divId1', 'Test!test1.action', 10, 1);
		    	//goToNextPage('ajax', 'Test!test1.action', 'divId1', 'firstPage', <s:property value="actionForm.getQuery1List().size()"/>, 10, null, queryList1, "all", "a");
				$.ajax({                                                 
					type: "POST",
					datatype:"html",    
					url: "pagination!qryByCache.action",                                      
				    //data: {pageSize:pageSize, nextPage:nextPage},   
				    success: function(result){
				    		$("#qryByCacheDiv").html(result);
				    		//
				    		updateUrl("qryByCacheDiv", "1", "10");
				    		//觸發預載
				    		preQueryByAJAX(preQryUrl);
				    },    
				    error: function(data, status, e){     
				      alert("Ajax失敗 = " + e.message);                    
				    }
				 });
			}
			
			function qryByDB() {
				$.ajax({                                                 
					type: "POST",
					datatype:"html",    
					url: "pagination!qryByDB.action",                                      
				    //data: {pageSize:"10", nextPage:"1"},   
				    success: function(result){
				    		$("#qryByDBDiv").html(result);	
				    },    
				    error: function(data, status, e){     
				      alert("Ajax失敗 = " + e.message);                    
				    }
				 });
				
				//goToNextPage('ajax', 'Test!test1.action', 'divId1', 'firstPage', <s:property value="actionForm.getQuery1List().size()"/>, 10, null);
			}
			
			function test3() { 
				alert(queryList2.size());
			}
			
			
			//var queryList1 = new ArrayList();

			
			
			
			function qry(){
				$("#qryCondition_" + "qryByCacheDiv").val($("#qryForm").serialize());
				$.ajax({                                                 
					type: "POST",
					datatype:"html",    
					url: "pagination!qryByCache.action",                                      
				    data: $("#qryForm").serialize() + '&' + $.param({pageSize:"10", nextPage:"1"}),   
				    success: function(result){
				    		$("#qryByCacheDiv").html(result);
				    },    
				    error: function(data, status, e){     
				      alert("Ajax失敗 = " + e.message);                    
				    }
				 });
			}
		</script>
	</head>
	<body>
		<s:form id="qryForm">
			<fieldset>
				<table>
					<tr>
						<td>代碼：</td>
						<td><s:textfield id="codeId" name="codeId"/></td>
						<td>代碼名稱：</td>
						<td><s:textfield id="codeName" name="codeName"/></td>
					</tr>
					<tr>
						<td colspan="4">
							<input type="button" value="查詢" onclick="qry();"/>
						</td>
					</tr>
				</table>
			</fieldset>
		</s:form>
		<div>
			<a href="javascript:qryByCache('pagination!preQryByCache.action')">qryByCache</a>
			<a href="javascript:qryByDB()">qryByDB</a>
		</div>
		<p:head id="qryByCacheDiv" paginationType="ajax" preActionUrl="pagination!preQryByCache.action" actionUrl="pagination!qryByCache.action" returnChkId="chkForQryByCache"></p:head>
		<br/>
		<p:head id="qryByDBDiv" paginationType="normal" actionUrl="pagination!qryByDB.action" returnChkId="qryListForDB"></p:head>
		<br/>
		
	</body>
</html>